<template>
  <div class="m-nav">
    <ul class="nav">
      <li class="list">
        <nuxt-link to="/my">我的美团</nuxt-link>
        <dl class="normal my">
          <dd><nuxt-link to="order">我的订单</nuxt-link></dd>
          <dd><nuxt-link to="order">我的收藏</nuxt-link></dd>
          <dd><nuxt-link to="order">抵用卷</nuxt-link></dd>
          <dd><nuxt-link to="order">账户设置</nuxt-link></dd>
        </dl>
      </li>
      <li>
        <nuxt-link to="/order">手机APP</nuxt-link>
      </li>
      <li class="list bd">
        <nuxt-link to="/center">商家中心</nuxt-link>
        <dl class="normal user">
          <dd><nuxt-link to="/userCenter">登录商家中心</nuxt-link></dd>
          <dd><nuxt-link to="/ai">美团智能收银</nuxt-link></dd>
          <dd><nuxt-link to="/coop">我想合作</nuxt-link></dd>
          <dd><nuxt-link to="/wap">手机免费开店</nuxt-link></dd>
          <dd><nuxt-link to="/joinus">餐饮代理商招募</nuxt-link></dd>
          <dd><nuxt-link to="/bill">商家申请开票</nuxt-link></dd>
        </dl>
      </li>
      <li class="list site">
        <nuxt-link to="/site">网站导航</nuxt-link>
        <div class="navsite normal">
          <dl class="hotel sec">
            <dt>酒店旅游</dt>
            <dd>国际机票</dd>
            <dd>火车票</dd>
            <dd>榛果民宿</dd>
            <dd>经济型酒店</dd>
            <dd>主题酒店</dd>
            <dd>商务酒店</dd>
            <dd>公寓</dd>
            <dd>豪华酒店</dd>
            <dd>客栈</dd>
            <dd>青年旅社</dd>
            <dd>度假酒店</dd>
            <dd>别墅</dd>
            <dd>农家院</dd>
          </dl>

          <dl class="food sec">
            <dt>吃美食</dt>
            <dd>烤鱼</dd>
            <dd>特色小吃</dd>
            <dd>烧烤</dd>
            <dd>自助餐</dd>
            <dd>火锅</dd>
            <dd>代金券</dd>
          </dl>

          <dl class="movie sec">
            <dt>看电影</dt>
            <dd>热映电影</dd>
            <dd>热门影院</dd>
            <dd>热映电影口碑榜</dd>
            <dd>最受期待电影</dd>
            <dd>国内票房榜</dd>
            <dd>北美票房榜</dd>
            <dd>电影排行榜</dd>
          </dl>

          <dl class="app sec">
            <dt>手机应用</dt>
            <dd>
              <a href="#">
                <img 
                  src="//s0.meituan.net/bs/fe-web-meituan/e5eeaef/img/appicons/meituan.png" 
                  title="美团官网"
                  alt="美团官网"
                >
              </a>
            </dd>

            <dd>
              <a href="#">
                <img 
                  src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/waimai.png" 
                  title="外卖APP"
                  alt="外卖APP"
                >
              </a>
            </dd>

            <dd>
              <a href="#">
                <img 
                  src="//s0.meituan.net/bs/fe-web-meituan/404d350/img/appicons/zhenguo.png" 
                  title="榛果APP"
                  alt="榛果APP"
                >
              </a>
            </dd>

            <dd>
              <a href="#">
                <img 
                  src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/dianping.png" 
                  title="点评APP"
                  alt="点评APP"
                >
              </a>
            </dd>

            <dd>
              <a href="#">
                <img 
                  src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/maoyan.png" 
                  title="猫眼APP"
                  alt="猫眼APP"
                >
              </a>
            </dd>
          </dl>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="stylus" scoped>
  .nav
    li
      display inline-block
      position relative
      padding 12px 14px
      box-sizing border-box
      border-left 1px solid transparent
      border-right 1px solid transparent
      height 40px
      a
        color #999999
        &:hover
          color #31bbac
      &.list:hover
        background-color #ffffff
        border-color #e5e5e5
        box-shadow 0 3px 5px 0 rgba(0, 0, 0, .1)
        .normal
          display block
      .normal
        display none 
        position absolute 
        top 95%
        right 0
        border-bottom-left-radius 4px
        border-bottom-right-radius 4px
        background-color #ffffff
        box-shadow 0 3px 5px 0 rgba(0, 0, 0, .1)
        box-sizing border-box
        text-align center
        z-index 1000
        & > dd
          line-height 35px
          &:hover
            color #31bbac
        &.my
          width 100%
        &.user
          width 140%
          border-top-left-radius 4px
        &.navsite
          width 1200px
          padding 30px 36px 20px 47px
          border-top-left-radius 4px
          .sec
            float left
            margin-right 47px
            text-align center 
            dt
              margin-bottom 26px
              font-size 14px
              color #31bbac
            dd
              padding 7px 0
              cursor pointer
              &:hover
                color #31bbac
            &.hotel
              width 234px
              dd
                float left 
                width 33%
                
            &.food
              width 156px
              dd
                float left 
                width 50%
            &.movie
              width 90px
            &.app
              float right
              dd
                display inline-block
                margin 0 8px
                a
                  display block
                  padding 5px 0
                  img 
                    width 60px
                    height 60px
</style>

